<template>
<div class="index-pane">
  <div class="pubheader">
    <div class="pubheader-inner"><img src="../../assets/index/logo.png" alt=""></div>
  </div>
  <div class="dashboard-container">
      <div class="index-container">
          <div class="index-pane-inner">
            <div class="pane-index1">
              <div class="pane-inner-column">
                <div class="index-pane-inner-1">
                    <!--数据下载-->
                  <div v-if="index<1" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                      <router-link :to="{path:item.link}">
                      <div class="index-links">
                        <img :src="item.icon" :alt="item.text">
                        <p>{{item.text}}</p>
                      </div>
                      </router-link>
                  </div>
                </div>
                <div class="index-pane-inner-2">
                  <div class="index-pane-inner-sub2">
                      <!--传播分析-->
                    <div v-if="index>0 && index<2" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                        <a :href="item.link" target="_blank">
                        <div class="mark-layer mark-layer-blue"></div>
                        <div class="mark-layer mark-layer-grey"></div>
                        <div class="index-links">
                          <img :src="item.icon" :alt="item.text">
                          <p>{{item.text}}</p>
                        </div>
                        </a>
                    </div>
                      <!--特色服务-->
                      <div v-if="index==2" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                          <!--<router-link :to="{path:item.link}">-->
                              <!--<div class="mark-layer mark-layer-blue"></div>-->
                              <!--<div class="mark-layer mark-layer-grey"></div>-->
                              <div class="index-links" @click="modal2 = true">
                                  <img :src="item.icon" :alt="item.text">
                                  <p>{{item.text}}</p>
                              </div>
                          <!--</router-link>-->
                      </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="pane-index2">
              <div class="pane-inner-column">
                
                <div class="index-pane-inner-3">
                  <div class="index-pane-inner-sub2">
                    <div v-if="index>2 && index<4" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                        <a :href="item.link" target="_blank">
                        <div class="mark-layer mark-layer-blue"></div>
                        <div class="mark-layer mark-layer-grey"></div>
                        <div class="index-links">
                          <img :src="item.icon" :alt="item.text">
                          <p>{{item.text}}</p>
                        </div>
                        </a>
                    </div>
                      <div v-if="index>3 && index<5" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                          <router-link :to="{path:item.link}">
                              <div class="mark-layer mark-layer-blue"></div>
                              <div class="mark-layer mark-layer-grey"></div>
                              <div class="index-links">
                                  <img :src="item.icon" :alt="item.text">
                                  <p>{{item.text}}</p>
                              </div>
                          </router-link>
                      </div>
                  </div>
                </div>
                <!--信息上传-->
                <div class="index-pane-inner-4">
                  <div v-if="index==5" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                      <router-link :to="{path:item.link}">
                      <div class="index-links">
                        <img :src="item.icon" :alt="item.text">
                        <p>{{item.text}}</p>
                      </div>
                      </router-link>
                  </div>
                </div>

              </div>
            </div>
            

          </div>
          <div class="pane-index3">
            <div class="pane-index3-inner">
              <div class="pane-index3-inner-1">
                <div v-if="index>5 && index<9" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                    <a :href="item.link" target="_blank">
                    <div class="index-links">
                      <img :src="item.icon" :alt="item.text">
                      <p>{{item.text}}</p>
                    </div>
                    </a>
                </div>
              </div>
            </div>
            <div class="pane-index3-inner">
              <div class="pane-index3-inner-2">
                <div v-if="index>8 && index<10" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                    <router-link :to="{path:item.link}">                    
                    <div class="index-links">
                      <img :src="item.icon" :alt="item.text">
                      <p>{{item.text}}</p>
                    </div>
                    </router-link>
                </div>
                  <div v-if="index>9 && index<11" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">
                      <a :href="item.link" target="_blank">
                          <div class="index-links">
                              <img :src="item.icon" :alt="item.text">
                              <p>{{item.text}}</p>
                          </div>
                      </a>
                  </div>
                <div v-if="index==11" :class="'wrap wrap-'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }" v-for="(item,index) in dataMenu">                  
                    <div class="index-links" @click="modal1 = true">
                      <img :src="item.icon" :alt="item.text">
                      <p>{{item.text}}</p>
                    </div>                    
                </div>
              </div>
            </div>
          </div>
      </div>
      
  </div>
  <div class="pubfooter">&copy;2019 科技融媒体云服务平台版权所有. 保留一切权利. 京ICP备16015379号-1</div>
<Modal
    v-model="modal1"
    width="732"
    class-name="vertical-center-modal">
    <div slot="header">数据汇总</div>
    <div slot="close"><img src="../../assets/index/close.png"></div>
    <div class="index-modal-pane">
    	<div class="index-modal-pane-inner">
    		<ul>
    			<li v-for="(item,index) in dataModal">
    				<div :class="'wrap wrap-a'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }">
	    				<router-link :to="{path:item.link}">
	    				<div class="index-links">
	    					<img :src="item.icon" :alt="item.text">
	    					<p>{{item.text}}</p>
	    				</div>
	    				</router-link>
    				</div>
    			</li>
    		</ul>
    	</div>
    </div>
    <div slot="footer"></div>
 </Modal>
    <Modal
            v-model="modal2"
            width="732"
            class-name="vertical-center-modal">
        <div slot="header">特色服务</div>
        <div slot="close"><img src="../../assets/index/close.png"></div>
        <div class="index-modal-pane">
            <div class="index-modal-pane-inner">
                <ul>
                    <li v-for="(item,index) in dataModalTese">
                        <div :class="'wrap wrap-a'+item.key" :style="{backgroundImage: 'url(' + item.bg + ')' }">
                            <a :href="item.link" target="_blank">
                                <div class="index-links">
                                    <img :src="item.icon" :alt="item.text">
                                    <p>{{item.text}}</p>
                                </div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div slot="footer"></div>
    </Modal>
</div>
</template>

<script>
  import Vue from 'vue'
  import Meta from 'vue-meta'
  import {mapGetters} from 'vuex'
  import { Modal } from 'iview'
  Vue.use(Meta);
  export default {
    name: 'dashboard',
    metaInfo: {
      title: '科技融媒体云服务平台',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' }
      ]
    },
    data(){
      return{
        dataMenu:[
          {
            key:1,
            icon:require('../../assets/index/cover-icon-a1.png'),
            bg:require('../../assets/index/cover-bg-1.png'),
            link:'/data_search_download/index',
            text:'数据下载'
          },
          {
            key:2,
            icon:require('../../assets/index/cover-icon-a2.png'),
            bg:require('../../assets/index/cover-bg-2.png'),
            link:'http://media.stdaily.com:8080/kpi/dashboard',
            text:'传播分析'
          },
          {
            key:3,
            icon:require('../../assets/index/cover-icon-a3.png'),
            bg:require('../../assets/index/cover-bg-3.png'),
            link:'',
            text:'特色服务'
          },
          {
            key:4,
            icon:require('../../assets/index/cover-icon-a4.png'),
            bg:require('../../assets/index/cover-bg-4.png'),
            link:'http://stdaily.gstai.com/',
            text:'舆情监督'
          },
          {
            key:5,
            icon:require('../../assets/index/cover-icon-a5.png'),
            bg:require('../../assets/index/cover-bg-5.png'),
            link:'/chart/index',
            text:'合肥高新区'
          },
          {
            key:6,
            icon:require('../../assets/index/cover-icon-a6.png'),
            bg:require('../../assets/index/cover-bg-6.png'),
            link:'/media_resources/index',
            text:'信息上传'
          },
          {
            key:7,
            icon:require('../../assets/index/cover-icon-a7.png'),
            bg:require('../../assets/index/cover-bg-7.png'),
            link:'',
            text:'政策库'
          },
          {
            key:8,
            icon:require('../../assets/index/cover-icon-a8.png'),
            bg:require('../../assets/index/cover-bg-8.png'),
            link:'http://www.kjcg123.com/',
            text:'成果库'
          },
          {
            key:9,
            icon:require('../../assets/index/cover-icon-a9.png'),
            bg:require('../../assets/index/cover-bg-9.png'),
            link:'http://list.kjcg123.com:8080/wokejinews/news/list?type=6',
            text:'专家库'
          },
          {
            key:10,
            icon:require('../../assets/index/cover-icon-a10.png'),
            bg:require('../../assets/index/cover-bg-10.png'),
            link:'/enterprise_library/index',
            text:'企业库'
          },
          {
            key:11,
            icon:require('../../assets/index/cover-icon-a11.png'),
            bg:require('../../assets/index/cover-bg-11.png'),
            link:'http://cpbst-dam.fotomore.com/#/login',
            text:'图片库'
          },
          {
            key:12,
            icon:require('../../assets/index/cover-icon-a12.png'),
            bg:require('../../assets/index/cover-bg-12.png'),
            link:'',
            text:'更多服务'
          }
        ],
        dataModal:[
        	{
	            key:1,
	            icon:require('../../assets/index/cover-icon-b1.png'),
	            bg:require('../../assets/index/cover-bg-b1.png'),
	            link:'/dashboard',
	            text:'媒体建设'
	        },
	        {
	            key:2,
	            icon:require('../../assets/index/cover-icon-b2.png'),
	            bg:require('../../assets/index/cover-bg-b2.png'),
	            link:'/dashboard',
	            text:'申报跟踪'
	        },
	        {
	            key:3,
	            icon:require('../../assets/index/cover-icon-b3.png'),
	            bg:require('../../assets/index/cover-bg-b3.png'),
	            link:'/park/index',
	            text:'智慧园区解决方案'
	        },
	        {
	            key:4,
	            icon:require('../../assets/index/cover-icon-b4.png'),
	            bg:require('../../assets/index/cover-bg-b4.png'),
	            link:'/dashboard',
	            text:'媒体融合解决方案'
	        },
	        {
	            key:5,
	            icon:require('../../assets/index/cover-icon-b5.png'),
	            bg:require('../../assets/index/cover-bg-b5.png'),
	            link:'/dashboard',
	            text:'网络安全解决方案'
	        },
	        {
	            key:6,
	            icon:require('../../assets/index/cover-icon-b6.png'),
	            bg:require('../../assets/index/cover-bg-b6.png'),
	            link:'/dashboard',
	            text:'传播分析解决方案'
	        }
        ],
          dataModalTese:[
              {
                  key:1,
                  icon:require('../../assets/index/cover-icon-c1.png'),
                  bg:require('../../assets/index/cover-bg-c1.png'),
                  link:'http://digitalpaper.stdaily.com/',
                  text:'科技日报'
              },
              {
                  key:2,
                  icon:require('../../assets/index/cover-icon-c2.png'),
                  bg:require('../../assets/index/cover-bg-c2.png'),
                  link:'http://www.stdaily.com/',
                  text:'中国科技网'
              },
              {
                  key:3,
                  icon:require('../../assets/index/cover-icon-c3.png'),
                  bg:require('../../assets/index/cover-bg-c3.png'),
                  link:'http://www.kepu.gov.cn/www/kepu',
                  text:'科普时报/中国科普网'
              },
              {
                  key:4,
                  icon:require('../../assets/index/cover-icon-c4.png'),
                  bg:require('../../assets/index/cover-bg-c4.png'),
                  link:'http://www.chinahightech.com/',
                  text:'高新导报/中国高新网'
              },
              {
                  key:5,
                  icon:require('../../assets/index/cover-icon-c5.png'),
                  bg:require('../../assets/index/cover-bg-c5.png'),
                  link:'http://gxqlm.chinahightech.com/',
                  text:'高新融媒联盟'
              },
              {
                  key:6,
                  icon:require('../../assets/index/cover-icon-c6.png'),
                  bg:require('../../assets/index/cover-bg-c6.png'),
                  link:'http://www.stdaily.com/guoji/',
                  text:'国际科技传播中心'
              }
          ],
        modal1: false,
          modal2:false
      }
    },
    computed: {
        name(){
            return this.$route.path
        }
    },
    methods: {
        ok () {
            this.$Message.info('点击了确定');
        },
        cancel () {
            this.$Message.info('点击了取消');
        }
    }
  }
</script>

<style rel="stylesheet/less" lang="less" >
    .displayflex(){
        -webkit-display: flex;
        -moz-display: flex;
        display: flex;
    }
    .flexcss3(){
        -webkit-flex:1;
        -moz-flex:1;
        flex:1;
    }
    .borderbox(){
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .index-pane{
        border-top:10px solid #4b74ff;
        height: 100%;
        overflow: auto;
        background-color: #f4f7ff;
        .displayflex();
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
        .borderbox();
    }
    .pubheader{
        background-color: #ffffff;
        box-shadow: 0px 0px 10px #d9e2ff;
    }
    .pubheader img{
        display: block;
    }
    .pubheader-inner{
        width:1400px;
        margin:0 auto;
        padding:20px 0;
    }
    .pubfooter{
        width: 100%;
        background-color: #ffffff;
        box-shadow: 10px 0px 10px #d9e2ff;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #bac2db;
        font-size: 16px;
    }
    .dashboard-container{
        /*width:1010px;*/
        width: 1400px;
        margin: auto;
        color: #ffffff;
        font-size: 18px;
    }
    .index-container{
        padding:15px 0;
    }
    .wrap{
        .borderbox();
        background-repeat: no-repeat;
        position: relative;
        cursor: pointer;
        text-align: center;
        overflow: hidden;
        border-radius: 10px;
    }
    .mask-play{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 10px;
    }
    .mark-layer-blue{
        background: rgba(53,140,221,.8);
        opacity: 0;
    }
    .mark-layer-grey{
        background: rgba(39,39,61,.4);
    }
    .bg-blue{
        background: rgba(56,131,222,.7);
    }
    .index-pane-inner{
        .displayflex();
    }
    .pane-inner-column{
        .displayflex();
    }
    .index-pane-inner-1,.index-pane-inner-3{
        .flexcss3();
        margin-right:15px;
    }
    .index-pane-inner-2,.index-pane-inner-4{
        .flexcss3();
    }
    .pane-index1{
        margin-right:15px;
        margin-bottom: 15px;
        .flexcss3();
    }
    .pane-index2{
        margin-bottom: 15px;
        .flexcss3();
    }
    .index-pane-inner-sub2{
        height: 100%;
        .displayflex();
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
    }
    .wrap-1,.wrap-6{
        background-color:#358cdd;
        background-size: cover;
        width:100%;
    }
    .wrap-2,.wrap-4{
        background-color:#358cdd;
        background-size: cover;
        width:100%;
        margin-bottom: 15px;
    }
    .wrap-3,.wrap-5{
        background-color:#358cdd;
        background-size: cover;
        width:100%;
        .flexcss3();
    }
    .pane-index3{
        .displayflex();
    }
    .pane-index3-inner{
        .flexcss3();
    }
    .pane-index3-inner-1,.pane-index3-inner-2{
        .displayflex();
        align-items:center;
        justify-content:center;
    }
    .pane-index3-inner-1{
        margin-right: 7.5px;
    }
    .pane-index3-inner-2{
        margin-left: 7.5px;
    }
    .pane-index3 .wrap{
        .flexcss3();
    }
    .wrap-7,
    .wrap-8,
    .wrap-9,
    .wrap-10,
    .wrap-11,
    .wrap-12{
        background:#358cdd url("../../assets/images/cover-1.png");
        background-size: cover;
        margin-right:15px;
    }
    .wrap-9,.wrap-12{
        margin-right:0;
    }
    .index-links{
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
        .displayflex();
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
        align-items:center;
        justify-content:center;
    }
    .index-links:hover{
        background: rgba(56,131,222,.7);
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
    }
    .index-links p{
        color: #ffffff;
        font-size:18px;
    }
    .pane-index3 .index-links{
        height: 200px;
    }
    .wrap-1 .index-links, .wrap-6 .index-links{
        height: 400px;
    }
    .wrap-2 .index-links,.wrap-4 .index-links{
        height: 216px;
    }
    .wrap-3 .index-links,.wrap-5 .index-links{
        /*height: 268px;*/
        height: 100%;
    }
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
        .ivu-modal-content{
            padding-top: 5px;
        }
        .ivu-modal-header{
            border-bottom: 1px solid #f4f7ff;
            margin:0 15px;
            padding-left: 0;
            font-size: 18px;
            font-weight: bold;
        }
        .ivu-modal-close{
            right:15px;
            top:15px;
        }
        .ivu-modal-body{
            padding-bottom: 0;
        }
        .ivu-modal-footer{
            border-top:none;
            display: none;
        }
    }
    .index-modal-pane{
        padding:0px 0 0 0;
    }
    .index-modal-pane-inner{
        ul{
            margin:0;
            padding:0;
            .displayflex();
            flex-wrap: wrap;

            li{
                list-style: none;
                margin:0 0 15px 0;
                padding:0;
                width:33.33333%;
                .wrap{
                    margin-right:15px;
                }
                &:nth-child(3n+0) .wrap{
                    margin-right:0;
                }
                .wrap{
                    background-size: cover;
                }
                .index-links{
                    width:100%;
                    height: 200px;
                }

            }
        }
    }
    @media(max-width: 1440px){
        .pubheader-inner,.dashboard-container,.pubfooter{
            width:100%;
            padding-left:10px;
            padding-right:10px;
        }
        .wrap-1 .index-links, .wrap-6 .index-links{
            height: 360px;
        }
        .wrap-2 .index-links, .wrap-4 .index-links {
            height: 150px;
        }
        .pane-index3 .index-links{
            height:185px;
        }
    }
    @media(max-width: 1366px){
        .pubheader-inner{
            padding:10px;
        }
        .pubfooter{
            height: 35px;
            line-height: 35px;
        }
        .pubheader img{
            height:50px;
        }
        .wrap-1 .index-links, .wrap-6 .index-links{
            height: 320px;
        }
        .wrap-2 .index-links, .wrap-4 .index-links {
            height: 150px;
        }
        .pane-index3 .index-links{
            height:145px;
        }
    }
    @media(max-width: 768px){
        .pubheader img{
            width:auto;
            height: 30px;
        }
        .app-main{
            overflow: auto;
        }
        .index-pane{
            display: block;
            height: auto;
            -webkit-flex-direction: inherit;
            -moz-flex-direction: inherit;
            flex-direction: inherit;
        }
        .index-pane-inner{
            display: block;
        }
        .pane-index1,.pane-index2{
            margin: 0 0 10px 0;
        }
        .pane-index3{
            display: block;
        }
        .index-pane-inner-1, .index-pane-inner-3{
            margin-right:10px;
        }
        .pane-index3-inner-1,.pane-index3-inner-2{
            margin:0 0 10px 0;
        }
        .wrap-2, .wrap-4{
            margin-bottom:10px;
        }
        .wrap-7, .wrap-8, .wrap-9, .wrap-10, .wrap-11, .wrap-12{
            margin-right: 10px;
        }
        .wrap-9,.wrap-12{
            margin-right: 0px;
        }
        .pubfooter{
            height: auto;
            line-height: 150%;
            padding:10px;
        }
    }
    @media(max-width: 414px){
        .pane-index3 .index-links{
            height: 122px;
        }
        .index-modal-pane-inner{
            ul{
                li{
                    width:50%;
                    &:nth-child(odd) .wrap{
                        margin-right:7.5px;
                    }
                    &:nth-child(even) .wrap{
                        margin-left:7.5px;
                        margin-right:0;
                    }
                    .index-links{
                        width:100%;
                        height: 160px;
                    }
                    .index-links p{
                        font-size:14px;
                    }
                }
            }
        }
    }
    @media(max-width: 375px){
        .pane-index3 .index-links{
            height: 115px;
        }
        .index-links img{
            width:50%;
        }
    }
</style>
